<template>
  <div>
    <div class="qup-title-box"><span class="border" /><span>店面对营销人员评价</span></div>
    <table-box
      ref="refTable"
      table-size="mini"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      show-index
      no-request
      :other-filters="otherFilters"
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <!-- 新增/编辑 -->
    <el-dialog
      width="700px"
      :title="formData.id?'编辑':'新增'"
      :visible.sync="showDlg"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" label-width="110px" size="mini" :model="formData" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="人员类型" prop="personTypeCode">
              <c-dict-select v-model="formData.personTypeCode" dict-type-code="MARKETING_PERSONNEL_TYPE" style="width:100%" @change="changePersonType" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="personName">
              <el-input
                v-model="formData.personName"
                :disabled="'A B C'.includes(formData.personTypeCode)"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="厂牌编码" prop="staffCode">
              <el-input v-model="formData.staffCode" :disabled="'A B C'.includes(formData.personTypeCode)" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formData.phone" :disabled="'A B C'.includes(formData.personTypeCode)" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属组织" prop="organization">
              <el-input v-model="formData.organization" :disabled="'A B C'.includes(formData.personTypeCode)" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划到店时间" prop="planVisitTime">
              <el-date-picker
                v-model="formData.planVisitTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划离店时间" prop="planLeaveTime">
              <el-date-picker
                v-model="formData.planLeaveTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="实际到店时间" prop="realityVisitTime">
              <el-date-picker
                v-model="formData.realityVisitTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际离店时间" prop="realityLeaveTime">
              <el-date-picker
                v-model="formData.realityLeaveTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="到店时长" prop="duration">
              <el-select v-model="formData.duration" style="width:100%" placeholder="请选择">
                <el-option
                  v-for="item in durationOptions"
                  :key="item"
                  :label="item+'天'"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评价" prop="criticizeType">
              <c-dict-select v-model="formData.criticizeType" dict-type-code="CRITICIZE_TYPE" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="评分" prop="criticizeScore">
              <el-input-number v-model="formData.criticizeScore" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="notes">
              <el-input v-model="formData.notes" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showDlg = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { deletePersonCriticize, savePersonCriticize, queryPersonInfo } from '@/api/marketService/dailyPatrol'
export default {
  name: 'PersonEvaluate',
  props: {
    patrolId: {
      type: String,
      default: ''
    },
    shopCode: {
      type: String,
      default: ''
    },
    picConfigId: {
      type: String,
      default: ''
    },
    isDetail: {
      type: [Boolean, Number],
      default: false
    }
  },
  data() {
    return {
      showDlg: false,
      durationOptions: [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6],
      formData: {
        criticizeScore: 0,
        criticizeType: '',
        duration: '',
        id: null,
        notes: '',
        organization: '',
        patrolId: '',
        personName: '',
        personTypeCode: '',
        personTypeName: '',
        phone: '',
        planLeaveTime: '',
        planVisitTime: '',
        realityLeaveTime: '',
        realityVisitTime: '',
        staffCode: ''
      },
      rules: {},
      tableSelected: [],
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/patrolPersonCriticize/page`,
        apiHeader: { },
        hideSearchBar: true,
        // pageSize: 20,
        // sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'personTypeCode',
            label: '人员类型',
            minWidth: 100,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'MARKETING_PERSONNEL_TYPE'
            }
          },
          {
            prop: 'personName',
            label: '姓名',
            minWidth: 100
          },
          {
            prop: 'staffCode',
            label: '厂牌编号',
            minWidth: 100
          },
          {
            prop: 'phone',
            label: '联系电话',
            minWidth: 100
          },
          {
            prop: 'organization',
            label: '所属组织',
            minWidth: 100
          },
          {
            prop: 'planVisitTime',
            label: '计划到店时间',
            minWidth: 140,
            formatData: ({ planVisitTime }) => {
              if (planVisitTime) return parseTime(planVisitTime, '{y}-{m}-{d}')
              else return ''
            }
          },
          {
            prop: 'planLeaveTime',
            label: '计划离店时间',
            minWidth: 140,
            formatData: ({ planLeaveTime }) => {
              if (planLeaveTime) return parseTime(planLeaveTime, '{y}-{m}-{d}')
              else return ''
            }
          },
          {
            prop: 'realityVisitTime',
            label: '实际到店时间',
            minWidth: 140,
            formatData: ({ realityVisitTime }) => {
              if (realityVisitTime) return parseTime(realityVisitTime, '{y}-{m}-{d}')
              else return ''
            }
          },
          {
            prop: 'realityLeaveTime',
            label: '实际离店时间',
            minWidth: 140,
            formatData: ({ realityLeaveTime }) => {
              if (realityLeaveTime) return parseTime(realityLeaveTime, '{y}-{m}-{d}')
              else return ''
            }
          },
          {
            prop: 'duration',
            label: '到店时长(天)',
            minWidth: 130
          },
          {
            prop: 'criticizeType',
            label: '评价',
            minWidth: 90,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'CRITICIZE_TYPE'
            }
          },
          {
            prop: 'criticizeScore',
            label: '评分',
            minWidth: 90
          },
          {
            prop: 'notes',
            label: '备注',
            minWidth: 100
          }
        ],
        btnList: [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'delete',
            outerFlag: true
          }
        ]
      }
    }
  },
  watch: {
    patrolId: {
      handler(v) {
        if (!v) return
        this.refreshTable()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    if (this.isDetail) {
      this.tableConfig.btnList = []
    }
  },
  methods: {
    changePersonType(data) {
      if ('A B C'.includes(data)) {
        queryPersonInfo(this.shopCode, data).then(res => {
          if (res.success && res.data) {
            this.formData.phone = res.data.phone
            this.formData.staffCode = res.data.staffCode
            this.formData.personName = res.data.userName
            this.formData.organization = res.data.organizationName
          }
        })
      } else {
        this.formData.phone = ''
        this.formData.staffCode = ''
        this.formData.personName = ''
        this.formData.organization = ''
      }
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'delete':
          this.handleDelete()
          break
        default:
          break
      }
    },
    handleDelete() {
      if (!this.singleJudge(this.tableSelected, '删除', true)) {
        return
      }
      deletePersonCriticize(this.tableSelected[0].id).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.refreshTable()
        }
      })
    },
    closeDlg() {
      this.formData = {}
      this.showDlg = false
    },
    handleSave() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          savePersonCriticize(this.formData).then(res => {
            if (res.success) {
              this.$message.success('保存成功')
              this.closeDlg()
              this.refreshTable()
            }
          })
        }
      })
    },
    handleEdit(row) {
      if (row && row.id) {
        const { criticizeScore, criticizeType, duration, id, notes, organization, patrolId, personName, personTypeCode, personTypeName, phone, planLeaveTime, planVisitTime, realityLeaveTime, realityVisitTime, staffCode } = row
        this.formData = { criticizeScore, criticizeType, duration, id, notes, organization, patrolId, personName, personTypeCode, personTypeName, phone, planLeaveTime, planVisitTime, realityLeaveTime, realityVisitTime, staffCode }
      }
      this.$set(this.formData, 'patrolId', this.patrolId)
      this.showDlg = true
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.otherFilters = [{ 'property': 'patrolId', 'value': this.patrolId, 'operator': '=', 'id': 'patrolId' }]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(v)
      })
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>
